<template>
    <div class="head">
        <div>
            <el-breadcrumb>
                <template v-for="item in breadcrumbInfo">
                    <el-breadcrumb-item v-if="item.meta.isRoute" :to="{ path: item.path }">{{ item.meta.title }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-else>{{ item.meta.title }}</el-breadcrumb-item>
                </template>
            </el-breadcrumb>
        </div>
        <div>
            <el-avatar :size="40" :src="userImg" class="userImg" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import defaultImg from '@/assets/img/default.png'

let route = useRoute()

let breadcrumbInfo = computed(() => {
    return route.matched
})

let userImg = computed(() => {
    return defaultImg
})

</script>

<style lang="scss" scoped>
.head {
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    color: #333;

    .el-breadcrumb {
        margin-top: 23px;
    }

    .userImg {
        margin-top: 10px;
    }
}
</style>